<template>
	<swiper class="article-container" @change="changeIndex" :current="activeIndex">
		<swiper-item v-for="(item,index) in labelList" :key="index">
			<MainItem :index="activeIndex"></MainItem>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';
	const props = defineProps({
		labelList: {
			type: Array,
			required: true
		},
		activeIndex: { type: Number }
	});
	const emits = defineEmits(['changeIndex']);
	const changeIndex = e => {
		const index = e.detail.current;
		emits('changeIndex', index);
	};
</script>

<style scoped lang="scss">
	.article-container {
		width: 100%;
		height: 100vh;
		display: flex;
	}
</style>